<template>
	<view class="Detailed">
		<view class="detailed dis-cen f5-background">
			<picker mode="selector" :range="filterData" @change="onChange" range-key="name">
				<view class="dis-ali">
					<text class="font-weight-400 color3 size-26">全部</text>
					<text class="iconfont icon-down-1-copy margin-left-12 color9 size-22"></text>
				</view>
			</picker>

			<view class="dis-ali">
				<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
					<view class="dis-ali">
						<text class="font-weight-400 color3 size-26">2024-07-25</text>
						<text class="iconfont icon-down-1-copy margin-left-12 color9 size-22"></text>
					</view>
				</picker>
				<view class="to font-weight-400 color3 size-26"> 至 </view>
				<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
					<view class="dis-ali">
						<text class="font-weight-400 color3 size-26">2024-07-25</text>
						<text class="iconfont icon-down-1-copy margin-left-12 color9 size-22"></text>
					</view>
				</picker>
			</view>
		</view>
		<view class="padding16">
			<view class="settlement f-background radius12 margin-bottom-16" v-for="(item,index) in 20" :key="index">
				<view class="income dis-cen border-bottom">
					<text class="font-weight-600 color3 size-28">收入结算</text>
					<text class="price-font color3 font-weight-600 size-36">¥156.99</text>
				</view>
				<!-- 明细 -->
				<view class="items" v-if="options.type == 2">
					<view class="dis-ali">
						<view class="font-weight-400 color9 size-24">订单号：</view>
						<view class="font-weight-400 color3 size-24">2024071166325555</view>
					</view>
					<view class="font-weight-400 color9 size-24">2024-07-13 12:35:26</view>
				</view>
				<!-- 提现 -->
				<view class="withdrawal" v-else>
					<view class="dis-cen">
						<view class="dis-ali">
							<view class="width font-weight-400 color9 size-24">提现单号</view>
							<view class="font-weight-400 color3 size-24">2024071166325555</view>
						</view>
						<text class="font-weight-500 size-24"
							:style="{color: !withdrawal[index] ? withdrawal[1].color : withdrawal[index].color}">
							{{ !withdrawal[index] ? withdrawal[1].name : withdrawal[index].name }}
						</text>
					</view>
					<view class="dis-ali">
						<view class="width font-weight-400 color9 size-24">提现单号</view>
						<view class="font-weight-400 color3 size-24">
							<text>周**</text>
							<text class="margin-left-16">尾号5566</text>
						</view>
					</view>
					<view class="dis-ali">
						<view class="width font-weight-400 color9 size-24">失败原因</view>
						<view class="font-weight-400 color3 size-24">银行卡号不正确</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { withdrawal } from "@/utils/enumeration/index"
	export default {
		data() {
			return {
				withdrawal,
				options: {},
				detTitle: {
					1: "提现记录",
					2: "资金明细"
				},
				screeningData: {
					start: "", // 开始
					end: "" // 结束
				},
				// 显示的筛选数据
				filterData: [],
				// 提现
				witList: [
					{ name: "全部", type: 0 },
					{ name: "处理中", type: 1 },
					{ name: "提现成功", type: 2 },
					{ name: "提现失败", type: 3 },
				],
				// 明细
				detList: [
					{ name: "全部", type: 0 },
					{ name: "收入结算", type: 1 },
					{ name: "提现", type: 2 },
					{ name: "平台扣款", type: 3 },
					{ name: "平台加款", type: 4 },
					{ name: "提现失败退回", type: 5 },
				]
			}
		},
		onLoad(options) {
			this.options = options
			uni.setNavigationBarTitle({
				title: this.detTitle[options.type]
			});
			this.filterData = options.type == 1 ? this.witList : this.detList
			console.log(options);
		},
		methods: {
			// 选择状态
			onChange(e) {

			}
		}
	}
</script>

<style lang="scss">
	.Detailed {
		.detailed {
			position: sticky;
			top: 0;
			padding: 20rpx 16rpx 20rpx 40rpx;

			.to {
				margin: 0 20rpx;
			}
		}

		.settlement {
			padding-left: 24rpx;

			.income {
				padding: 28rpx 24rpx 28rpx 0;
			}

			.items,
			.withdrawal {
				padding: 28rpx 24rpx 28rpx 0;
				display: grid;
				grid-row-gap: 20rpx;
			}

			.withdrawal {
				.width {
					width: 156rpx;
				}
			}
		}
	}
</style>